<template>
  <div class="info-chart">
    <schart
      :canvas-id="canvasId"
      :type="type"
      :width="width"
      :height="height"
      :data="data"
      :options="options"
    ></schart>
  </div>
</template>
<script>
import Schart from 'vue-schart'

export default {
  name: 'InfoChart',
  components: {
    Schart
  },
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      canvasId: 'info-chart',
      type: 'bar',
      width: 500,
      height: 500,
      options: {
        title: '各种类题目数量'
      }
    }
  },
  mounted() {
    const dom = document.getElementById(this.canvasId)
    dom.width = this.width
    dom.height = this.height
  }
}
</script>
